<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>

    <title>社区首页</title>

    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8"/>

    <!-- Main Font -->
    <script src="js/libs/webfontloader.min.js"></script>

    <script>
        WebFont.load({
            google: {
                families: ['Roboto:300,400,500,700:latin']
            }
        });
    </script>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-reboot.css">
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="Bootstrap/dist/css/bootstrap-grid.css">

    <!-- Main Styles CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/fonts.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/xtiper.css">

    <link rel="stylesheet" type="text/css" href="css/webuploader.css">
    <link rel="stylesheet" type="text/css" href="css/diyUpload.css">

    <!--表情css-->

</head>
<body class="page-has-left-panels page-has-right-panels">
<div id="wholeContent">
    <!--用于判断用户是否登录-->
    <p th:if="${session.loginUser != null}" id="isLogin"></p>
    <!-- Preloader -->

    <div id="hellopreloader">
        <div class="preloader">
            <svg width="45" height="45" stroke="#fff">
                <g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
                    <circle cx="22" cy="22" r="6" stroke="none">
                        <animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
                                 values="6;22"/>
                        <animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="1;0"/>
                        <animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="2;0"/>
                    </circle>
                    <circle cx="22" cy="22" r="6" stroke="none">
                        <animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
                                 values="6;22"/>
                        <animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="1;0"/>
                        <animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s"
                                 repeatCount="indefinite" values="2;0"/>
                    </circle>
                    <circle cx="22" cy="22" r="8">
                        <animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
                                 values="6;1;2;3;4;5;6"/>
                    </circle>
                </g>
            </svg>

            <div class="text">Loading ...</div>
        </div>
    </div>

    <!-- ... end Preloader -->


    <!-- Fixed Sidebar Left -->
    <div th:if="${session.loginUser != null}">
        <div th:replace="~{leftSidebar :: leftSidebar}"></div>
    </div>
    <!-- ... end Fixed Sidebar Left -->


    <!-- Fixed Sidebar Right -->
    <div th:if="${session.loginUser != null}">
        <div th:replace="~{rightSidebar :: rightSiebar}"></div>
    </div>
    <!-- ... end Fixed Sidebar Right -->


    <!-- Header-BP -->

    <header th:replace="~{header :: header}"></header>

    <!-- ... end Header-BP -->


    <!-- Responsive Header-BP -->

    <header class="header header-responsive" id="site-header-responsive">

        <div class="header-content-wrapper">
            <ul class="nav nav-tabs mobile-app-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#request" role="tab">
                        <div class="control-icon has-items">
                            <svg class="olymp-happy-face-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
                            </svg>
                            <div class="label-avatar bg-blue">6</div>
                        </div>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#chat" role="tab">
                        <div class="control-icon has-items">
                            <svg class="olymp-chat---messages-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-chat---messages-icon">
                                </use>
                            </svg>
                            <div class="label-avatar bg-purple">2</div>
                        </div>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#notification" role="tab">
                        <div class="control-icon has-items">
                            <svg class="olymp-thunder-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-thunder-icon"></use>
                            </svg>
                            <div class="label-avatar bg-primary">8</div>
                        </div>
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#search" role="tab">
                        <svg class="olymp-magnifying-glass-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"></use>
                        </svg>
                        <svg class="olymp-close-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>

    </header>

    <!-- ... end Responsive Header-BP -->
    <div class="header-spacer"></div>


    <div class="container">
        <div class="row">

            <!-- Main Content -->

            <main class="col col-xl-6 order-xl-2 col-lg-12 order-lg-1 col-md-12 col-sm-12 col-12">

                <div class="ui-block" th:if="${session.loginUser != null}">

                    <!-- News Feed Form  -->

                    <div class="news-feed-form">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active inline-items" data-toggle="tab" href="#home-1" role="tab"
                                   aria-expanded="true">

                                    <svg class="olymp-status-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-status-icon"></use>
                                    </svg>

                                    <span>状态</span>
                                </a>
                            </li>
                         <!--   <li class="nav-item">
                                <a class="nav-link inline-items" data-toggle="tab" href="#profile-1" role="tab"
                                   aria-expanded="false">

                                    <svg class="olymp-multimedia-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-multimedia-icon">
                                        </use>
                                    </svg>

                                    <span>视屏</span>
                                </a>
                            </li>-->

                            <li class="nav-item main">
                                <a class="nav-link inline-items" th:href="@{/publish-article}">
                                    <svg class="olymp-blog-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-blog-icon"></use>
                                    </svg>
                                    <span>博客帖子</span>
                                </a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="home-1" role="tabpanel" aria-expanded="true">
                                <form th:action="@{/publishShortContent}" method="post" id="states-form"
                                      enctype="multipart/form-data">
                                    <div class="author-thumb">
                                        <img th:src="${(session.loginUser != null) ? session.loginUser.imagePath : 'img/avatar1.jpg'}"
                                             alt="author" style="width: 40px; height: 40px">
                                    </div>
                                    <div class="form-group with-icon label-floating is-empty">
                                        <label class="control-label">分享你的想法。。。</label>
                                        <div id="emoji" contentEditable='true' class='emoji-container'>
                                        <textarea class="form-control" placeholder="" id="post-states"
                                                  name="articleContent"></textarea>
                                        </div>
                                    </div>
                                    <div class="add-options-message">
                                        <a href="#" onclick="alert('功能正在加速开发中')" class="options-message" data-toggle="tooltip" data-placement="top"
                                           data-original-title="添加照片" id="choose_photo">
                                            <svg class="olymp-camera-icon" data-toggle="modal"
                                                 data-target="#exampleModal">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-camera-icon">
                                                </use>
                                            </svg>
                                            <input id="choose" name="files" type="file" accept="iamge/*"
                                                   style="display: none" multiple>
                                        </a>
                                        <a href="#" onclick="alert('功能正在加速开发中')" class="options-message" data-toggle="tooltip" data-placement="top"
                                           data-original-title="@你的朋友">
                                            <svg class="olymp-computer-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-computer-icon">
                                                </use>
                                            </svg>
                                        </a>

                                        <div class="options-message smile-block">
                                            <svg class="olymp-happy-sticker-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-sticker-icon">
                                                </use>
                                            </svg>
                                            <ul class="more-dropdown more-with-triangle triangle-bottom-right"
                                                style="left: 20px;">
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat1.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat2.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat3.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    w <a href="#" onclick="alert('功能正在加速开发中')">
                                                    <img src="img/icon-chat4.png" alt="icon">
                                                </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat5.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat6.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat7.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat8.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat9.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat10.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat11.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat12.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat13.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat14.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat15.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat16.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat17.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat18.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat19.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat20.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat21.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat22.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat23.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat24.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat25.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat26.png" alt="icon">
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img src="img/icon-chat27.png" alt="icon">
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <a href="#" onclick="alert('功能正在加速开发中')" class="options-message" data-toggle="tooltip" data-placement="top"
                                           data-original-title="添加位置">
                                            <svg class="olymp-small-pin-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-small-pin-icon">
                                                </use>
                                            </svg>
                                        </a>

                                        <button class="btn btn-primary btn-md-2"
                                                onclick="postStates(this);return false;">发布
                                        </button>
                                        <button class="btn btn-md-2 btn-border-think btn-transparent c-grey">预览</button>

                                    </div>
                                </form>
                            </div>

                            <div class="tab-pane" id="profile-1" role="tabpanel" aria-expanded="true">
                                <form>
                                    <div class="author-thumb">
                                        <img th:src="${(session.loginUser != null) ? session.loginUser.imagePath : 'img/avatar1.jpg'}"
                                             alt="author" style="width: 40px; height: 40px">
                                    </div>
                                    <div class="form-group with-icon label-floating is-empty">
                                        <label class="control-label">分享你的想法。。。</label>
                                        <textarea class="form-control" placeholder="" id="post-video"></textarea>
                                    </div>
                                    <div class="add-options-message">
                                        <a href="#" onclick="alert('功能正在加速开发中')" class="options-message" data-toggle="tooltip" data-placement="top"
                                           data-original-title="添加照片">
                                            <svg class="olymp-camera-icon" data-toggle="modal"
                                                 data-target="#exampleModal">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-camera-icon">
                                                </use>
                                            </svg>
                                        </a>
                                        <a href="#" onclick="alert('功能正在加速开发中')" class="options-message" data-toggle="tooltip" data-placement="top"
                                           data-original-title="@你的朋友">
                                            <svg class="olymp-computer-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-computer-icon">
                                                </use>
                                            </svg>
                                        </a>

                                        <a href="#" onclick="alert('功能正在加速开发中')" class="options-message" data-toggle="tooltip" data-placement="top"
                                           data-original-title="添加位置">
                                            <svg class="olymp-small-pin-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-small-pin-icon">
                                                </use>
                                            </svg>
                                        </a>
                                        <button class="btn btn-primary btn-md-2">发布</button>
                                        <button class="btn btn-md-2 btn-border-think btn-transparent c-grey">预览</button>

                                    </div>

                                </form>
                            </div>

                        </div>
                    </div>

                    <!-- ... end News Feed Form  -->
                </div>
                <div class="switch-states">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist"
                        style="background-color: #fff;margin-bottom: 10px;border-radius: 8px;">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-states-tab" data-toggle="pill" href="#pills-states"
                               role="tab" aria-controls="pills-home" aria-selected="true">状态</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-blog-tab" data-toggle="pill" href="#pills-blog"
                               role="tab" aria-controls="pills-profile" aria-selected="false">博客</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-states" role="tabpanel"
                             aria-labelledby="pills-states-tab">
                            <!-- 状态显示-->
                            <div class="ui-block" v-for="article in articles"
                                 v-if="article.article.articleTitle == null">
                                <p class="d-none articleId">{{article.article.articleId}}</p>
                                <article class="hentry post video">
                                    <div class="post__author author vcard inline-items">
                                        <img alt="author" :src="article.author.imagePath">
                                        <div class="author-date">
                                            <a class="h6 post__author-name fn"
                                               :href="'/molihub/lookUserProfilePage?userName=' + article.author.userName">{{article.author.userName}}</a>
                                            <div class="post__date">
                                                <time class="published">
                                                    {{article.article.publishTime}}
                                                </time>
                                            </div>
                                        </div>

                                    </div>
                                    <a :href="'read-article?uId='+article.article.userId+'&uName='+article.author.userName+'&aId='+
                                article.article.articleId+'&title='+article.article.articleTitle" style="color: black">
                                        <p class="line-limit-length" v-if="article.article.articleContent != ''">
                                            {{article.article.articleContent}}</p>
                                    </a>
                                    <div class="row" v-if="article.article.imgPath != null">
                                        <div class="col-xs-6 col-md-3 mt-3" v-for="path in article.article.imgPath">
                                            <a href="javascript:void(0)" class="thumbnail">
                                                <img :src="path.path" class="card-img-top smallimg" alt="..."
                                                     style="height: 100%">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="post-additional-info inline-items">
                                        <a href="#"  class="post-add-icon inline-items like-active-icon"
                                           onclick="giveLike(this);return false;" v-if="article.flag == true">
                                            <svg class="olymp-heart-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                            </svg>
                                            <span class="like-count">{{article.likeCount}}</span>
                                        </a>
                                        <a href="#"  class="post-add-icon inline-items "
                                           onclick="giveLike(this);return false;" v-else>
                                            <svg class="olymp-heart-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                            </svg>
                                            <span class="like-count">{{article.likeCount}}</span>
                                        </a>

                                        <ul class="friends-harmonic">
                                            <div>
                                                <li v-for="likeUser in article.likeUserList">
                                                    <a :href="'/molihub/lookUserProfilePage?userName=' + likeUser.userName">
                                                        <img :src="likeUser.imagePath" alt="friend"
                                                             style="width: 28px;height: 28px;">
                                                    </a>
                                                </li>
                                            </div>
                                        </ul>
                                        <div class="names-people-likes" v-if="article.likeUserList.length > 0">
                                            <div>
                                                <a :href="'/molihub/lookUserProfilePage?userName=' + likeUser.userName"
                                                   v-for="(likeUser, index) in article.likeUserList"
                                                   v-if="index <= 2">{{likeUser.userName}}</a>&nbsp;
                                            </div>
                                            <span>and</span>
                                            <span>{{article.likeCount}}</span>
                                            <span>person more like this</span>
                                            <br>
                                        </div>
                                        <div class="comments-shared">
                                            <a href="#"  class="post-add-icon inline-items"
                                               onclick="showPostComment(this);return false;">
                                                <svg class="olymp-speech-balloon-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-speech-balloon-icon">
                                                    </use>
                                                </svg>

                                                <span>{{article.commentCount}}</span>
                                            </a>

                                            <a href="#" onclick="alert('功能正在加速开发中')" class="post-add-icon inline-items">
                                                <svg class="olymp-share-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-share-icon">
                                                    </use>
                                                </svg>

                                                <span>16</span>
                                            </a>
                                        </div>
                                    </div>
                                </article>
                                <form class="comment-form inline-items d-none">
                                    <div class="post__author author vcard inline-items">
                                        <div th:if="${session.loginUser != null}">
                                            <img th:src="${session.loginUser.imagePath}" alt="author">
                                        </div>
                                        <div class="form-group with-icon-right is-empty">
                                            <textarea class="form-control" placeholder=""></textarea>
                                            <div class="add-options-message">
                                                <a href="#" onclick="alert('功能正在加速开发中')" class="options-message" data-toggle="modal"
                                                   data-target="#update-header-photo">
                                                    <svg class="olymp-camera-icon">
                                                        <use xlink:href="#olymp-camera-icon"></use>
                                                    </svg>
                                                </a>
                                            </div>
                                            <span class="material-input"></span></div>
                                    </div>
                                    <button class="btn btn-md-2 btn-primary" onclick="postComment(this);return false;">
                                        发表评论
                                    </button>
                                    <button class="btn btn-md-2 btn-border-think c-grey btn-transparent custom-color"
                                            onclick="hideComment(this);return false;">
                                        取消
                                    </button>
                                </form>
                                <!-- Comments -->
                                <div th:replace="~{commentCommon::comments}"></div>
                                <!--  end Comments -->
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-blog" role="tabpanel"
                             aria-labelledby="pills-blog-tab">
                            <!-- 博客显示-->
                            <div class="ui-block" v-for="article in articles"
                                 v-if="article.article.articleTitle != null">
                                <p class="d-none articleId">{{article.article.articleId}}</p>
                                <article class="hentry post video">
                                    <div class="post__author author vcard inline-items">
                                        <img alt="author" :src="article.author.imagePath"/>
                                        <div class="author-date">
                                            <a class="h6 post__author-name fn"
                                               :href="'/molihub/lookUserProfilePage?userName=' + article.author.userName">{{article.author.userName}}
                                            </a>
                                            <div class="post__date">
                                                <time class="published" datetime="2004-07-24T18:18">
                                                    {{article.article.publishTime}}
                                                </time>
                                            </div>
                                        </div>
                                    </div>
                                    <a :href="'read-article?uId='+article.article.userId+'&uName='+article.author.userName+'&aId='+
                                article.article.articleId+'&title='+article.article.articleTitle" style="color: black">
                                        <h3 v-if='article.article.articleTitle != null'>
                                            {{article.article.articleTitle}}</h3>
                                        <p class="line-limit-length" v-if="article.article.articleContent != ''">
                                            {{article.article.articleContent}}</p>
                                    </a>
                                    <div class="row" v-if="article.article.imgPath != null">
                                        <div class="col-xs-6 col-md-3 mt-3" v-for="path in article.article.imgPath">
                                            <a href="javascript:void(0)" class="thumbnail">
                                                <img :src="path.path" class="card-img-top smallimg" alt="..."
                                                     style="height: 100%">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="post-additional-info inline-items">
                                        <a href="#"  class="post-add-icon inline-items like-active-icon"
                                           onclick="giveLike(e);return false;" v-if="article.flag == true">
                                            <svg class="olymp-heart-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                            </svg>
                                            <span class="like-count" style="color: red">{{article.likeCount}}</span>
                                        </a>
                                        <a href="#"  class="post-add-icon inline-items"
                                           onclick="giveLike(e);return false;" v-else>
                                            <svg class="olymp-heart-icon">
                                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
                                            </svg>
                                            <span class="like-count">{{article.likeCount}}</span>
                                        </a>

                                        <ul class="friends-harmonic">
                                            <div v-if="article.likeUserList.length > 0">
                                                <li v-for="likeUser in article.likeUserList">
                                                    <a href="#" onclick="alert('功能正在加速开发中')">
                                                        <img :src="likeUser.imagePath" alt="friend"
                                                             style="width: 28px;height: 28px;">
                                                    </a>
                                                </li>
                                            </div>
                                        </ul>

                                        <div class="names-people-likes" v-if="article.likeUserList.length > 0">
                                            <div v-for="(likeUser, index) in article.likeUserList">
                                                <a href="#" onclick="alert('功能正在加速开发中')" v-if="index <= 2">{{likeUser.userName}}</a>
                                            </div>
                                            <span>and</span>
                                            <span>{{article.likeCount}}</span>
                                            <span>person more like this</span>
                                            <br>
                                        </div>

                                        <div class="comments-shared">
                                            <a href="#" class="post-add-icon inline-items"
                                               onclick="showPostComment(this);return false;">
                                                <svg class="olymp-speech-balloon-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-speech-balloon-icon">
                                                    </use>
                                                </svg>

                                                <span>{{article.commentCount}}</span>
                                            </a>

                                            <a href="#" onclick="alert('功能正在加速开发中')" class="post-add-icon inline-items">
                                                <svg class="olymp-share-icon">
                                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-share-icon">
                                                    </use>
                                                </svg>

                                                <span>16</span>
                                            </a>
                                        </div>
                                    </div>
                                </article>
                                <form class="comment-form inline-items d-none">
                                    <div class="post__author author vcard inline-items">
                                        <div th:if="${session.loginUser != null}">
                                            <img th:src="${session.loginUser.imagePath}" alt="author">
                                        </div>
                                        <div class="form-group with-icon-right is-empty">
                                            <textarea class="form-control" placeholder=""></textarea>
                                            <div class="add-options-message">
                                                <a href="#" onclick="alert('功能正在加速开发中')" class="options-message" data-toggle="modal"
                                                   data-target="#update-header-photo">
                                                    <svg class="olymp-camera-icon">
                                                        <use xlink:href="#olymp-camera-icon"></use>
                                                    </svg>
                                                </a>
                                            </div>
                                            <span class="material-input"></span></div>
                                    </div>
                                    <button class="btn btn-md-2 btn-primary" onclick="postComment(this);return false;">
                                        发表评论
                                    </button>
                                    <button class="btn btn-md-2 btn-border-think c-grey btn-transparent custom-color"
                                            onclick="hideComment(this);return false;">
                                        取消
                                    </button>
                                </form>
                                <!-- Comments -->
                                <div th:replace="~{commentCommon::comments}"></div>
                                <!--  end Comments -->
                            </div>
                        </div>
                    </div>
                    <a id="load-more-button" href="#"  onclick="loadMoreArticle();return false;"
                       class="btn btn-control btn-more">
                        <svg class="olymp-three-dots-icon">
                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                        </svg>
                    </a>
                </div>

            </main>

            <!-- ... end Main Content -->


            <!-- Left Sidebar -->

            <aside class="col col-xl-3 order-xl-1 col-lg-6 order-lg-2 col-md-6 col-sm-6 col-12">
                <div class="ui-block">

                    <!-- W-Weather -->

                    <div class="widget w-wethear">
                        <a href="#" class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                        </a>

                        <div class="wethear-now inline-items">
                            <div class="temperature-sensor"><span id="tody_main"></span></div>
                            <div class="max-min-temperature">
                                <span id="min_tem"></span>
                                <span id="max_tem"></span>
                            </div>
                            <svg class="olymp-weather-partly-sunny-icon" id="today"></svg>
                        </div>

                        <div class="wethear-now-description">
                            <div class="climate"></div>
                            <span>空气质量: <span id="air_level"></span></span>
                            <span>湿度: <span id="humidity"></span></span>
                        </div>

                        <ul class="weekly-forecast">
                            <li>
                                <div class="day" id="day_1"></div>
                                <svg class="olymp-weather-sunny-icon" id="day_img1"></svg>
                                <div class="temperature-sensor-day" id="day_tem1">60°</div>
                            </li>

                            <li>
                                <div class="day" id="day_2"></div>
                                <svg class="olymp-weather-partly-sunny-icon" id="day_img2"></svg>
                                <div class="temperature-sensor-day" id="day_tem2">58°</div>
                            </li>

                            <li>
                                <div class="day" id="day_3"></div>
                                <svg class="olymp-weather-cloudy-icon" id="day_img3"></svg>
                                <div class="temperature-sensor-day" id="day_tem3">67°</div>
                            </li>

                            <li>
                                <div class="day" id="day_4"></div>
                                <svg class="olymp-weather-rain-icon" id="day_img4"></svg>

                                <div class="temperature-sensor-day" id="day_tem4">70°</div>
                            </li>

                            <li>
                                <div class="day" id="day_5"></div>
                                <svg class="olymp-weather-storm-icon" id="day_img5">

                                </svg>

                                <div class="temperature-sensor-day" id="day_tem5">58°</div>
                            </li>

                            <li>
                                <div class="day" id="day_6"></div>
                                <svg class="olymp-weather-snow-icon" id="day_img6">
                                </svg>
                                <div class="temperature-sensor-day" id="day_tem6">68°</div>
                            </li>
                            <li>
                                <div class="day" id="day_7"></div>
                                <svg class="olymp-weather-wind-icon-header" id="day_img7"></svg>
                                <div class="temperature-sensor-day" id="day_tem7"></div>
                            </li>
                        </ul>
                        <div class="date-and-place">
                            <h5 class="date"><span id="week"></span>, <span id="date_1"></span></span></h5>
                            <div class="place"></div>
                        </div>
                    </div>
                    <!-- W-Weather -->
                </div>

                <div class="ui-block">

                    <!-- W-Calendar -->
                    <div class="calendar">
                        <div class="header"><a data-action="prev-month" href="javascript:void(0)"
                                               title="Previous Month"><i></i></a>
                            <div class="text" data-render="month-year"></div>
                            <a data-action="next-month" href="javascript:void(0)"
                               title="Next Month"><i></i></a>
                        </div>
                        <div class="months" data-flow="left">
                            <div class="month month-a">
                                <div class="render render-a"></div>
                            </div>
                            <div class="month month-b">
                                <div class="render render-b"></div>
                            </div>
                        </div>
                    </div>

                    <!-- ... end W-Calendar -->
                </div>

             <!--   <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">猜你喜欢</h6>
                        <a href="#" onclick="alert('功能正在加速开发中')" class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                        </a>
                    </div>

                    &lt;!&ndash; W-Friend-Pages-Added &ndash;&gt;

                    <ul class="widget w-friend-pages-added notification-list friend-requests">
                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar41-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">The Marina Bar</a>
                                <span class="chat-message-item">Restaurant / Bar</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                                <a href="#" onclick="alert('功能正在加速开发中')">
                                    <svg class="olymp-star-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                    </svg>
                                </a>
                            </span>

                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar42-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Tapronus Rock</a>
                                <span class="chat-message-item">Rock Band</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                                <a href="#" onclick="alert('功能正在加速开发中')">
                                    <svg class="olymp-star-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                    </svg>
                                </a>
                            </span>

                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar43-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Pixel Digital Design</a>
                                <span class="chat-message-item">Company</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                                <a href="#" onclick="alert('功能正在加速开发中')">
                                    <svg class="olymp-star-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                    </svg>
                                </a>
                            </span>
                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar44-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Thompson’s Custom Clothing Boutique</a>
                                <span class="chat-message-item">Clothing Store</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                                <a href="#" onclick="alert('功能正在加速开发中')">
                                    <svg class="olymp-star-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                    </svg>
                                </a>
                            </span>

                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar45-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Crimson Agency</a>
                                <span class="chat-message-item">Company</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                                <a href="#" onclick="alert('功能正在加速开发中')">
                                    <svg class="olymp-star-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                    </svg>
                                </a>
                            </span>
                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar46-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Mannequin Angel</a>
                                <span class="chat-message-item">Clothing Store</span>
                            </div>
                            <span class="notification-icon" data-toggle="tooltip" data-placement="top"
                                  data-original-title="ADD TO YOUR FAVS">
                                <a href="#" onclick="alert('功能正在加速开发中')">
                                    <svg class="olymp-star-icon">
                                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-star-icon"></use>
                                    </svg>
                                </a>
                            </span>
                        </li>
                    </ul>

                    &lt;!&ndash; .. end W-Friend-Pages-Added &ndash;&gt;
                </div>-->
            </aside>

            <!-- ... end Left Sidebar -->


            <!-- Right Sidebar -->

            <aside class="col col-xl-3 order-xl-3 col-lg-6 order-lg-3 col-md-6 col-sm-6 col-12">

              <!--  <div class="ui-block">

                    &lt;!&ndash; W-Birthsday-Alert &ndash;&gt;

                    <div class="widget w-birthday-alert">
                        <div class="icons-block">
                            <svg class="olymp-cupcake-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-cupcake-icon"></use>
                            </svg>
                            <a href="#"  class="more">
                                <svg class="olymp-three-dots-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                                </svg>
                            </a>
                        </div>

                        <div class="content">
                            <div class="author-thumb">
                                <img src="img/avatar48-sm.jpg" alt="author">
                            </div>
                            <span>Today is</span>
                            <a href="#" onclick="alert('功能正在加速开发中')" class="h4 title">Marina Valentine’s Birthday!</a>
                            <p>Leave her a message with your best wishes on her profile page!</p>
                        </div>
                    </div>

                    &lt;!&ndash; ... end W-Birthsday-Alert &ndash;&gt;
                </div>

                <div class="ui-block">
                    <div class="ui-block-title">
                        <h6 class="title">推荐好友</h6>
                        <a href="#" onclick="alert('功能正在加速开发中')" class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                        </a>
                    </div>


                    &lt;!&ndash; W-Action &ndash;&gt;

                    <ul class="widget w-friend-pages-added notification-list friend-requests">
                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar38-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Francine Smith</a>
                                <span class="chat-message-item">8 Friends in Common</span>
                            </div>
                            <span class="notification-icon">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="accept-request">
                                    <span class="icon-add without-text">
                                        <svg class="olymp-happy-face-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon">
                                            </use>
                                        </svg>
                                    </span>
                                </a>
                            </span>
                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar39-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Hugh Wilson</a>
                                <span class="chat-message-item">6 Friends in Common</span>
                            </div>
                            <span class="notification-icon">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="accept-request">
                                    <span class="icon-add without-text">
                                        <svg class="olymp-happy-face-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon">
                                            </use>
                                        </svg>
                                    </span>
                                </a>
                            </span>
                        </li>

                        <li class="inline-items">
                            <div class="author-thumb">
                                <img src="img/avatar40-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Karen Masters</a>
                                <span class="chat-message-item">6 Friends in Common</span>
                            </div>
                            <span class="notification-icon">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="accept-request">
                                    <span class="icon-add without-text">
                                        <svg class="olymp-happy-face-icon">
                                            <use xlink:href="svg-icons/sprites/icons.svg#olymp-happy-face-icon">
                                            </use>
                                        </svg>
                                    </span>
                                </a>
                            </span>
                        </li>

                    </ul>

                    &lt;!&ndash; ... end W-Action &ndash;&gt;
                </div>

                <div class="ui-block">

                    <div class="ui-block-title">
                        <h6 class="title">好友活动信息</h6>
                        <a href="#" onclick="alert('功能正在加速开发中')" class="more">
                            <svg class="olymp-three-dots-icon">
                                <use xlink:href="svg-icons/sprites/icons.svg#olymp-three-dots-icon"></use>
                            </svg>
                        </a>
                    </div>


                    &lt;!&ndash; W-Activity-Feed &ndash;&gt;

                    <ul class="widget w-activity-feed notification-list">
                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar49-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Marina Polson</a> commented on Jason Mark’s
                                <a href="#" onclick="alert('功能正在加速开发中')" class="notification-link">photo.</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">2 mins ago</time></span>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar9-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Jake Parker </a> liked Nicholas Grissom’s <a
                                    href="#" onclick="alert('功能正在加速开发中')" class="notification-link">status update.</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">5 mins ago</time></span>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar50-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Mary Jane Stark </a> added 20 new photos to
                                her
                                <a href="#" onclick="alert('功能正在加速开发中')" class="notification-link">gallery album.</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">12 mins ago</time></span>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar51-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Nicholas Grissom </a> updated his profile <a
                                    href="#" onclick="alert('功能正在加速开发中')" class="notification-link">photo</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">1 hour ago</time></span>
                            </div>
                        </li>
                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar48-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Marina Valentine </a> commented on Chris
                                Greyson’s <a href="#" onclick="alert('功能正在加速开发中')" class="notification-link">status update</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">1 hour ago</time></span>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar52-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Green Goo Rock </a> posted a <a href="#" onclick="alert('功能正在加速开发中')"
                                                                                                           class="notification-link">status
                                update</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">1 hour ago</time></span>
                            </div>
                        </li>
                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar10-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Elaine Dreyfuss </a> liked your <a href="#" onclick="alert('功能正在加速开发中')"
                                                                                                              class="notification-link">blog
                                post</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">2 hours ago</time></span>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar10-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Elaine Dreyfuss </a> commented on your <a
                                    href="#" onclick="alert('功能正在加速开发中')" class="notification-link">blog post</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">2 hours ago</time></span>
                            </div>
                        </li>

                        <li>
                            <div class="author-thumb">
                                <img src="img/avatar53-sm.jpg" alt="author">
                            </div>
                            <div class="notification-event">
                                <a href="#" onclick="alert('功能正在加速开发中')" class="h6 notification-friend">Bruce Peterson </a> changed his <a href="#" onclick="alert('功能正在加速开发中')"
                                                                                                              class="notification-link">profile
                                picture</a>.
                                <span class="notification-date"><time class="entry-date updated"
                                                                      datetime="2004-07-24T18:18">15 hours ago</time></span>
                            </div>
                        </li>

                    </ul>

                    &lt;!&ndash; .. end W-Activity-Feed &ndash;&gt;
                </div>-->

                <div class="ui-block">


                    <!-- W-Action -->

                    <div class="widget w-action">

                        <img src="img/logo.png" alt="Olympus">
                        <div class="content">
                            <h4 class="title">OLYMPUS</h4>
                            <span>最适合你的社交平台！</span>
                            <a th:href="@{/login.html}" class="btn btn-bg-secondary btn-md">现在注册！</a>
                        </div>
                    </div>

                    <!-- ... end W-Action -->
                </div>

            </aside>

            <!-- ... end Right Sidebar -->

        </div>
    </div>

    <img src="" alt="" class="bigimg">
    <div class="mask">
        <img src="img/close1.jpg" alt="" style="background: white;">
    </div>
    <!-- Window-popup Update Header Photo -->

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">选择图片</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="upBox">
                        <div id="inputBox" onclick="choose();return false;">点击选择图片</div>
                        <div id="imgBox"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- ... end Window-popup Update Header Photo -->

    <!-- Window-popup Choose from my Photo -->

    <div class="modal fade" id="choose-from-my-photo" tabindex="-1" role="dialog" aria-labelledby="choose-from-my-photo"
         aria-hidden="true">
        <div class="modal-dialog window-popup choose-from-my-photo" role="document">

            <div class="modal-content">
                <a href="#" onclick="alert('功能正在加速开发中')" class="close icon-close" data-dismiss="modal" aria-label="Close">
                    <svg class="olymp-close-icon">
                        <use xlink:href="svg-icons/sprites/icons.svg#olymp-close-icon"></use>
                    </svg>
                </a>
                <div class="modal-header">
                    <h6 class="title">Choose from My Photos</h6>

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-expanded="true">
                                <svg class="olymp-photos-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-photos-icon"></use>
                                </svg>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-expanded="false">
                                <svg class="olymp-albums-icon">
                                    <use xlink:href="svg-icons/sprites/icons.svg#olymp-albums-icon"></use>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="modal-body">
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active" id="home" role="tabpanel" aria-expanded="true">

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo1.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo2.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo3.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo4.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo5.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo6.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo7.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo8.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <div class="radio">
                                    <label class="custom-radio">
                                        <img src="img/choose-photo9.jpg" alt="photo">
                                        <input type="radio" name="optionsRadios">
                                    </label>
                                </div>
                            </div>


                            <a href="#" onclick="alert('功能正在加速开发中')" class="btn btn-secondary btn-lg btn--half-width">Cancel</a>
                            <a href="#" onclick="alert('功能正在加速开发中')" class="btn btn-primary btn-lg btn--half-width">Confirm Photo</a>

                        </div>
                        <div class="tab-pane" id="profile" role="tabpanel" aria-expanded="false">

                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo10.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#" onclick="alert('功能正在加速开发中')">South America Vacations</a>
                                        <span>Last Added: 2 hours ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo11.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#" onclick="alert('功能正在加速开发中')">Photoshoot Summer 2016</a>
                                        <span>Last Added: 5 weeks ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo12.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#" onclick="alert('功能正在加速开发中')">Amazing Street Food</a>
                                        <span>Last Added: 6 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>

                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo13.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#" onclick="alert('功能正在加速开发中')">Graffity & Street Art</a>
                                        <span>Last Added: 16 hours ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo14.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#" onclick="alert('功能正在加速开发中')">Amazing Landscapes</a>
                                        <span>Last Added: 13 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>
                            <div class="choose-photo-item" data-mh="choose-item">
                                <figure>
                                    <img src="img/choose-photo15.jpg" alt="photo">
                                    <figcaption>
                                        <a href="#" onclick="alert('功能正在加速开发中')">The Majestic Canyon</a>
                                        <span>Last Added: 57 mins ago</span>
                                    </figcaption>
                                </figure>
                            </div>


                            <a href="#" onclick="alert('功能正在加速开发中')" class="btn btn-secondary btn-lg btn--half-width">Cancel</a>
                            <a href="#" onclick="alert('功能正在加速开发中')" class="btn btn-primary btn-lg disabled btn--half-width">Confirm Photo</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- ... end Window-popup Choose from my Photo -->


    <a class="back-to-top" href="#">
        <img src="svg-icons/back-to-top.svg" alt="arrow" class="back-icon">
    </a>


    <!-- Window-popup-CHAT for responsive min-width: 768px -->
    <!--聊天窗口 -->
    <div th:replace="~{chatCommon :: chatCommon}"></div>
    <div th:replace="~{findFriendModel :: modal}"></div>
    <br>
    <!--评论窗口-->
    <div th:replace="~{commentCommon :: commentModal}"></div>
</div>
<!-- ... end Window-popup-CHAT for responsive min-width: 768px -->

<!-- JS Scripts -->
<script src="js/jQuery/jquery-3.4.1.js"></script>
<!--<script src="js/jquery.js"></script>-->
<script src="js/index.js"></script>
<script src="js/libs/jquery.appear.js"></script>
<script src="js/xtiper.min.js"></script>
<script src="js/libs/jquery.mousewheel.js"></script>
<script src="js/libs/perfect-scrollbar.js"></script>
<script src="js/libs/jquery.matchHeight.js"></script>
<script src="js/libs/svgxuse.js"></script>
<script src="js/libs/imagesloaded.pkgd.js"></script>
<script src="js/libs/Headroom.js"></script>
<script src="js/libs/velocity.js"></script>
<script src="js/libs/ScrollMagic.js"></script>
<script src="js/libs/jquery.waypoints.js"></script>
<script src="js/libs/jquery.countTo.js"></script>
<script src="js/libs/popper.min.js"></script>
<script src="js/libs/material.min.js"></script>
<script src="js/libs/bootstrap-select.js"></script>
<script src="js/libs/smooth-scroll.js"></script>
<script src="js/libs/selectize.js"></script>
<script src="js/libs/swiper.jquery.js"></script>
<script src="js/libs/moment.js"></script>
<script src="js/libs/daterangepicker.js"></script>
<script src="js/libs/fullcalendar.js"></script>
<script src="js/libs/isotope.pkgd.js"></script>
<script src="js/libs/ajax-pagination.js"></script>
<script src="js/libs/Chart.js"></script>
<script src="js/libs/chartjs-plugin-deferred.js"></script>
<script src="js/libs/circle-progress.js"></script>
<script src="js/libs/loader.js"></script>
<script src="js/libs/run-chart.js"></script>
<script src="js/libs/jquery.magnific-popup.js"></script>
<script src="js/libs/jquery.gifplayer.js"></script>
<script src="js/libs/mediaelement-and-player.js"></script>
<script src="js/libs/mediaelement-playlist-plugin.min.js"></script>
<script src="js/libs/ion.rangeSlider.js"></script>
<script src="js/main.js"></script>
<script src="js/libs-init/libs-init.js"></script>
<script defer src="fonts/fontawesome-all.js"></script>
<script src="Bootstrap/dist/js/bootstrap.js"></script>
<script src="Bootstrap/dist/js/bootstrap.bundle.js"></script>
<!--多图片上传-->
<script type="text/javascript" src="js/uploadImg.js"></script>
<!--引入表情js-->
<!-- 点击图片放大 -->
<script src="js/zoom.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/functionWithIndex.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=a732d71d8cacb92702aa8ea4203e353c&plugin=AMap.CitySearch">
</script>
<div th:if="${session.loginUser != null}">
    <script src="js/fileUpload.js"></script>
    <script src="js/chatJs.js"></script>
    <script src="js/indexCommon.js"></script>
    <script>
        const name = $("#loginedUserName").text();
        console.log("name --> " + name);

        var app = new Vue({
            el: "#wholeContent",
            data: {
                messages: [], // 好友列表
                friendRequests: [], // 请求消息
                chatMessages: [], // 聊天消息
                notificationMessages: [], // 通知消息
                articles: [],
                flag: false,
                currentPage: 1,
                loginedUserName: name,
            },
            methods: {
                initArticles: async function () {
                    console.log("initArticles..........");
                    let m = this;
                    axios.post("index/articles/" + this.currentPage)
                        .then(function (response) {
                            for (let i = 0; i < response.data.length; i++) {
                                if (response.data[i].article.imgPath !== "" || response.data[i].article.imgPath != null) {
                                    response.data[i].article.imgPath = jQuery.parseJSON(response.data[i].article.imgPath);
                                }
                                for (let j = 0; j < response.data[i].likeUserList.length; j++) {
                                    // 如果当前点赞的用户中存在当前登录的用户，则
                                    if (response.data[i].likeUserList[j].userName === name) {
                                        response.data[i].flag = true
                                    }
                                }
                                response.data[i].article.publishTime = m.timestampToTime(response.data[i].article.publishTime);
                                // 转换时间戳
                                for (let j = 0; j < response.data[i].articleComments.length; j++) {
                                    response.data[i].articleComments[j].articleComment.commentTime =
                                        m.timestampToTime(response.data[i].articleComments[j].articleComment.commentTime);
                                    for (let k = 0; k < response.data[i].articleComments[j].childComments.length; k++) {
                                        response.data[i].articleComments[j].childComments[k].articleComment.commentTime =
                                            m.timestampToTime(response.data[i].articleComments[j].childComments[k].articleComment.commentTime)
                                    }
                                }
                                console.log(response.data[i]);
                                m.articles.push(response.data[i]);
                            }
                        })
                        .catch(function (error) {

                        });
                    this.currentPage += 1;
                },
                initFriendList: function () {
                    console.log("init..............");
                    this.messages = [];
                    var m = this;
                    axios.get("friend/findAll/" + name)
                        .then(function (response) {
                            for (let i = 0; i < response.data.length; i++) {
                                console.log(response.data[i]);
                                m.messages.push(response.data[i]);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                },
                initRequests: function () {
                    var temp = this;
                    axios.get("request/message/byReceive/" + name)
                        .then(function (response) {
                            // console.log(response.data);
                            for (let i = 0; i < response.data.length; i++) {
                                var data = JSON.parse(response.data[i]);
                                let number;
                                let html;
                                switch (data.flag) {
                                    case "1": // flag位为1，表示是发送添加好友请求
                                        number = $("#request_number").text();
                                        // 更新请求数量
                                        $("#request_number").text(parseInt(number) + 1);
                                        html = document.getElementById("friend-requests").innerHTML;
                                        temp.friendRequests.push(data);
                                        break;
                                    case "2": // flag位为2，表示是同意添加好友请求
                                        // 表示接受好友添加请求，将消息显示在通知里
                                        number = $("#notification-number").text();
                                        $("#notification-number").text(parseInt(number) + 1);
                                        temp.notificationMessages.push(data);
                                        playAudio();
                                        break;
                                    case "3": // flag位为3，表示拒绝添加好友请求
                                        number = $("#notification-number").text();
                                        $("#notification-number").text(parseInt(number) + 1);
                                        html = document.getElementById("notification-list").innerHTML;
                                        temp.notificationMessages.push(data);
                                        playAudio();
                                        break;
                                    case "4":
                                        // 表示聊天信息
                                        console.log("接到的消息是：----> " + data.content);
                                        console.log("data.A :" + data.A);
                                        // 更改消息通知的数量
                                        number = $("#chat-number").text();
                                        $("#chat-number").text(parseInt(number) + 1);

                                        temp.chatMessages.push(data);

                                        playAudio();
                                        break;
                                    case "6":
                                        number = $("#notification-number").text();
                                        $("#notification-number").text(parseInt(number) + 1);
                                        // 更新通知
                                        playAudio();
                                        app.notificationMessages.push(data);
                                        break;
                                    default:
                                        break;
                                }

                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                },
                timestampToTime: function (timestamp) {
                    return new Date(timestamp).toLocaleString().replace(/:\d{1,2}$/, ' ');
                }
            },
            created: function () {
                this.initFriendList();
                this.initRequests();
                this.initArticles();
                window.initFriendList = this.initFriendList;
                window.loadMoreArticles = this.initArticles;
            },
        });
    </script>
</div>
<script th:if="${session.loginUser == null}">
    var app = new Vue({
        el: "#wholeContent",
        data: {
            articles: [],
            currentPage: 1,
            isLoading: true,
        },
        methods: {
            initArticles: async function () {
                console.log("initArticles..........");
                let m = this;
                axios.post("index/articles/" + this.currentPage)
                    .then(function (response) {
                        console.log(response.data);
                        console.info("长度： " + response.data.length);
                        if (response.data === "ERROR") {
                            xtip.msg("没有更多内容了！");
                            return false;
                        } else {
                            for (let i = 0; i < response.data.length; i++) {
                                console.log(response.data[i]);
                                if (response.data[i].article.imgPath !== "" || response.data[i].article.imgPath != null) {
                                    response.data[i].article.imgPath = jQuery.parseJSON(response.data[i].article.imgPath);
                                }
                                response.data[i].article.publishTime = m.timestampToTime(response.data[i].article.publishTime);
                                for (let j = 0; j < response.data[i].articleComments.length; j++) {
                                    response.data[i].articleComments[j].articleComment.commentTime =
                                        m.timestampToTime(response.data[i].articleComments[j].articleComment.commentTime);
                                    for (let k = 0; k < response.data[i].articleComments[j].childComments.length; k++) {
                                        response.data[i].articleComments[j].childComments[k].articleComment.commentTime =
                                            m.timestampToTime(response.data[i].articleComments[j].childComments[k].articleComment.commentTime)
                                    }
                                }
                                m.articles.push(response.data[i]);
                            }

                        }
                        m.currentPage += 1;
                        m.isLoading = false;
                    })
                    .catch(function (error) {

                    });

            },
            timestampToTime: function (timestamp) {
                return new Date(timestamp).toLocaleString().replace(/:\d{1,2}$/, ' ');
            }
        },
        created: function () {
            this.initArticles();
            window.loadMoreArticles = this.initArticles;
        },
    });
</script>
<script>
    imgUpload({
        inputId: 'choose', //input框id
        imgBox: 'imgBox', //图片容器id
        buttonId: 'btn', //提交按钮id
        upUrl: 'upload/UploadAction', //提交地址
        data: 'file1' //参数名
    });

    function choose() {
        document.getElementById("choose").click();
    }

    $(document).ready(function () {
        /*
        smallimg   // 小图
        bigimg  //点击放大的图片
        mask   //黑色遮罩
        */
        var obj = new zoom('mask', 'bigimg', 'smallimg');
        obj.init();
    });

    /**
     * 点赞
     */
    function giveLike(e) {
        $(e).toggleClass("like-active-icon");
        let userName = $("#loginedUserName").text().trim();
        if (userName == null || userName == "") {
            window.location.href = "login";
        }
        let articleId = $(e).parent().parent().prev().text();
        console.info("文章ID：" + articleId);
        $.ajax({
            type: "POST",
            url: "like/" + userName + "/" + articleId,
            success: function (result) {
                let resultJson = jQuery.parseJSON(result);
                console.info(result);
                if (resultJson.flag === "OK") {
                    xtip.msg("点赞成功！");
                    let $ul;
                    if ($(e).hasClass("post-add-icon")) {
                        // 更新人数
                        $(e).children("span").text(resultJson.count);
                        $ul = $(e).next();
                    }

                    /*  if ($ul.children().children("li").length <= 5) {
                          // 如果没超过了5个人点赞，就显示点赞用户头像
                          let $li = $("<li></li>");
                          let $a = $("<a></a>");
                          let $img = $("<img style=\"width: 28px;height: 28px;\"/>");
                          $img.attr("src", $("#user-img").attr("src"));
                          $li.append($a);
                          $a.append($img);
                          $ul.children("div").append($li);
                      }*/

                } else if (resultJson.flag === "DELETE") {
                    xtip.msg("取消点赞！");
                    let num = $(e).children("span").text();
                    $(e).children("span").text(parseInt(num) - 1);
                } else {
                    xtip.msg("点赞失败！");
                }

            },
            error: function () {

            }

        })
    }

    /**
     * 显示发布评论
     */
    function showPostComment(e) {
        let userName = $("#loginedUserName").text().trim();
        if (userName == null || userName == "") {
            window.location.href = "login";
        } else {
            $(e).parent().parent().parent().next().toggleClass("d-none");
            $(e).parent().parent().parent().next().next().toggleClass("d-none");
        }
    }

    var article_id, target_name, target_comment_id;

    /**
     * 显示回复评论框
     */
    function showComment(e, flag) {
        console.info($(e));
        target_name = $(e).parent().children("div").children("div").children("a").text().trim();
        // 设置标题
        $("#reply-name").text("回复：" + target_name);

        if (flag === 0) {
            article_id = $(e).parent().parent().parent().parent().parent().parent().find(".articleId").text().trim().trim();
            target_comment_id = $(e).parent().find(".d-none").text().trim();
        } else {
            target_comment_id = $(e).parent().parent().parent().parent().prev().find(".d-none").text().trim();
            article_id = $(e).parent().parent().parent().parent().parent().parent().parent().parent()
                .parent().find(".articleId").text().trim();
        }
        console.info("文章ID" + article_id + "目标评论ID：" + target_comment_id + "目标评论用户名: " + target_name);
        $('#commentModal').modal('show');

    }

    /**
     * 发表评论
     */
    function postComment(e) {
        let userName = $("#loginedUserName").text();
        let commentContent = $(e).prev().children(".form-group")
            .children("textarea").val();
        let articleId = $(e).parent().parent().children(".articleId").text();
        console.info("用户名：" + userName + "评论内容：" + commentContent + "文章ID：" + articleId);
        $.ajax({
            type: "POST",
            url: "publish/comment/" + userName + "/" + commentContent + "/ " + articleId,
            success: function (result) {
                console.info(result);
                if (result === "OK") {
                    xtip.msg("发表评论成功");
                    let commentNum = $(e).parent().prev().children(".post-additional-info").children(".comments-shared").children().eq(0).children("span");
                    $(commentNum).text(parseInt($(commentNum).text()) + 1);
                    $(e).parent().addClass("d-none");
                    $(e).prev().children(".form-group").children("textarea").val("");
                    // window.location.reload();
                }

            },
            error: function () {

            }

        })
    }

    function hideComment(e) {
        $(e).parent().addClass("d-none");
    }

    /**
     * 回复评论
     */
    function publishReplyComment() {
        let commentContent = $("#comment-content").val();
        let userName = $("#loginedUserName").text().trim();
        console.info("文章ID" + article_id + "目标评论ID：" + target_comment_id + "目标评论用户名: " + target_name + " 当前用户：" + userName);
        $.ajax({
            type: "POST",
            url: "publish/reply/" + userName + "/ " + target_name + "/" + commentContent + "/" + article_id + "/" + target_comment_id,
            success: function (result) {
                console.info(result);
                if (result === "OK") {
                    window.location.reload();
                }

            }
        })
    }

    /**
     * 天气
     */
    var code;

    function showCityInfo() {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch();
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                if (result && result.city && result.bounds) {
                    var adcode = result.adcode;
                    code = adcode;
                }
            } else {
                //天气查询失败
            }
        });
    }

    showCityInfo();

    function judgeImg(status, imgId) {
        if ((status.search('晴') != -1)) {
            $(imgId).html('<use xlink:href=\"svg-icons/sprites/icons-weather.svg#olymp-weather-sunny-icon\"></use>');
        } else if (status.search('云') != -1) {
            $(imgId).html('<use xlink:href=\"svg-icons/sprites/icons-weather.svg#olymp-weather-partly-sunny-icon\"></use>');
        } else if (status.search('雨') != -1) {
            $(imgId).html('<use xlink:href=\"svg-icons/sprites/icons-weather.svg#olymp-weather-rain-icon\"></use>');
        } else if (status.search('阴') != -1) {
            $(imgId).html('<use xlink:href=\"svg-icons/sprites/icons-weather.svg#olymp-weather-cloudy-icon\"></use>');
        }
    }

    $.ajax({
        type: 'GET',
        url: 'https://tianqiapi.com/api',
        data: 'version=v1&cityid=' + code + '&appid=26161536&appsecret=2LkFkDWJ',
        dataType: 'JSON',
        error: function () {
            alert('网络错误');
        },
        success: function (res) {
            $('#min_tem').html(res.data[0].tem2);
            $('#max_tem').html(res.data[0].tem1);
            $('#tody_main').html(parseInt(res.data[0].tem2) + (parseInt(res.data[0].tem1) - parseInt(res.data[0].tem2)) / 2);
            $(".climate").html(res.data[0].wea);
            $("#air_level").html(res.data[0].air_level);
            $("#humidity").html(res.data[0].humidity);
            judgeImg(res.data[0].wea, "#today");
            $("#week").html(res.data[0].week);
            $("#date_1").html(res.data[0].date);
            $(".place").html(res.city);
            for (var i = 1; i < res.data.length; i++) {
                var temp_day = "#day_" + i + "";
                var temp_day_tem = "#day_tem" + i + "";
                var day_img = "#day_img" + i + "";
                $(temp_day).html(res.data[i].week);
                $(temp_day_tem).html(res.data[i].tem);
                judgeImg(res.data[i].wea, day_img);

            }
        }
    });

</script>
</body>

</html>